<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <div>
          <el-input placeholder="请输入文章标题" v-model="inputTitle"></el-input>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-date-picker v-model="inputTime" type="date" placeholder="选择日期"></el-date-picker>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-input placeholder="请输入文章作者" v-model="inputAuthor"></el-input>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-button type="primary" plain round @click="clear">清空</el-button>
          <el-button type="primary" plain round @click="postUeditor">提交</el-button>
        </div>
      </el-col>
    </el-row>
    <vue-ueditor-wrap mode="listener" v-model="msg"
                      :config="myConfig" @ready="ready">

    </vue-ueditor-wrap>
    <p>
      <el-button type="primary" @click="showOne();">
        获取编辑器内容
      </el-button>
    </p>
    <div v-html="divHtml">
      11
    </div>

  </div>
</template>

<script>

export default {
  name: 'PolicyReleaseByUeditor',
  data () {
    return {
      inputTitle: '',
      inputAuthor: '',
      inputTime: '',

      msg: '<h2>hello UEditoe</h2>',
      value: '测试项目',
      myConfig: {
        autoHeightEnabled: false,
        initialFrameHeight: 600,
        initialFrameWidth: '100%',
        serverUrl: 'http://47.96.28.215:8088/api/ueditor/config',
        UEDITOR_HOME_URL: '/static/UEditor/'
      }
    }
  },
  methods: {
    ready (editorInstance) {
      console.log(`编辑器实例${editorInstance.key}:`, editorInstance)
    },
    showOne () {
      alert(this.msg)
    },
    clear () {
      this.inputTitle = ''
      this.inputAuthor = ''
      this.inputTime = ''
    },
    postUeditor () {
      if (this.inputAuthor === '') {
        this.$message.error('文章作者不能为空')
        return
      }
      if (this.inputTitle === '') {
        this.$message.error('文章标题不能为空')
        return
      }
      if (this.inputTime === '') {
        this.$message.error('文章时间不能为空')
        return
      }
      this.$axios.post('/policy/add', {
        policyAuthor: this.inputAuthor,
        policyTitle: this.inputTitle,
        policyData: this.inputTime,
        policyText: this.msg
      }, {emulateJSON: true}
      ).then(successResponse => {
        this.$message.success('提交成功')
      }).catch(failResponse => {
        this.$message.error('提交失败')
      })
    }
  }

}
</script>

<style scoped>

</style>
